<!DOCTYPE HTML>

<head>
	<meta charset="utf-8" />
	<title>字体特效</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		
		body {
			background: black;
		}
		
		canvas {
			display: block;
		}
	</style>
</head>

<body>
	<!-- canvas标签定义图形，比如图表和其他图像 -->
	<canvas id="c"></canvas>
	<script type="text/javascript">
		
		//获取canvas标签
		var c = document.getElementById("c");
		
		//getContext() 方法返回一个用于在画布上绘图的环境。
		var ctx = c.getContext("2d");
		
		//将绘图高度/宽度扩展到和屏幕相同
		c.height = window.innerHeight;//返回窗口的文档显示区的高度。
		c.width = window.innerWidth;//返回窗口的文档显示区的宽度。

		//准备要显示的字符串
		var chinese = "$0123456789"
		
		//将字符串按照分隔符拆分成数组
		chinese = chinese.split("");

		//要绘制的内容字体大小
		var font_size = 15;
		
		//要绘制的字体宽度
		var columns = c.width/font_size;
		
		//声明一个盛装要下落的字体的位置
		var drops = [];
		
		for(var x = 0; x < columns; x++){
			drops[x] = 1; 
		}

		function draw()
		{	
			//设置或返回用于填充绘画的颜色、渐变或模式
			ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
			//绘制图形填充大小
			ctx.fillRect(0, 0, c.width, c.height);

			//字体颜色
			ctx.fillStyle = "blue";
			
			ctx.font = font_size + "px arial";
			
			//循环绘制文字
			for(var i = 0; i < drops.length; i++)
			{
				//随机上方自定义的字符串内的内容;
				var text = chinese[Math.floor(Math.random()*chinese.length)];
				
				//画布上绘制字体 (规定在画布上输出的文本,文本的x坐标位置,本的y坐标位置)。
				ctx.fillText(text, i*font_size, drops[i]*font_size);
				
				//如果字体下落的位置大于绘制画板的高度重新绘制;/判断是否显示
				if(drops[i]*font_size > c.height && Math.random() > 0.975){
					drops[i] = 0;
				}
				
				drops[i]++;
			}
		}
		//循环函数
		setInterval(draw, 33);
</script>
</body>

</html>